<template>
    <div id="index-sider">
        <el-menu default-active="1" theme="dark" @select="handleEvent" router class='siderbar_background'>
            <el-menu-item index="0" class="user">
                <div class="user-info">
                    <img v-vImg="avatar" />
                    <!--<el-badge :value="badge" class="right-item"></el-badge>-->
                    <div class="user-name">Welcome, {{ current_user.real_name }}</div>
                    <div class="user-role">
                        <el-tag type="success" class="user-tag">{{ current_user.brand_name || '窗管家'}}</el-tag>
                        <el-tag class="user-tag user-tag-location">{{ current_user.user_type | level}}</el-tag>
                    </div>
                </div>
            </el-menu-item>
            <el-menu-item v-for="(slide, key, index) in current_slides" :key="slide.id" :index="slide.router">
                <i :class="slide.icon"></i>{{slide.name}}
            </el-menu-item>
            <div class="auth_cancellation">
	            <el-menu-item index="/setting" class="bottom-setting">
	                <span><i class="el-icon-setting"></i>设置 </span>
	            </el-menu-item>
	            <el-menu-item index="/setting" class="bottom-setting" @click="login_out">
	                <span> <i class="el-icon-setting"></i>退出 </span>
	            </el-menu-item>
	        </div>    
        </el-menu>
    </div>
</template>

<script>
import  filters  from '../../utils/filters'
import { mapGetters, mapState, mapActions } from 'vuex'
export default {
    data() {
        return {}
    },
    computed: {
        ...mapGetters(['current_slides', 'current_user', 'avatar'])
    },
    mounted() {},
    methods: {
    		level:filters.level,
        ...mapActions(['logoutAction']),
        login_out() {
            this.logoutAction()
            this.$router.replace({ path: '/login/logs' })
        },
        handleEvent(key) {
        }
    }

}
</script>
<style scoped>
.user {
    margin-top: 42px;
    height: auto;
}

.user-info img {
    width: 80px;
    height: 80px;
    border-radius: 100%;
}

.right-item {
    float: right;
}

.bottom-setting {
    margin-top: 20px;
    /*width: 100px;*/
    float: left;
}

.bottom-setting :hover {}

.bottom-setting span {
    font-size: 12px;
    opacity: 0.5;
    color: #c0ccda;
    line-height: 18px;
    letter-spacing: 0;
}

.user-tag {
    padding: 5px 10px;
    height: auto;
}

.user-tag-location {
    margin-left: 10px;
}

.siderbar_background {
    background: #27292e;
}

.siderbar_background li:active {
    background: #3d444f;
}
.auth_cancellation{
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  position: fixed;
    bottom: 0;
    margin-bottom: 0px;
}
</style>
